<template>
  <div>
      <van-tabbar v-model="active" border safe-area-inset-bottom @change="onchange">
        <van-tabbar-item icon="home-o" to="home">首頁</van-tabbar-item>
        <van-tabbar-item icon="play-circle-o"  to="videoList">視頻</van-tabbar-item>
          <van-tabbar-item icon="cart-o"  to="product">商品</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="userInfo">用戶</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
    window.o
export default {
    name:'floor',
    data(){
        return{
            active:0,
            // 第一步为初始值
        }
    },
    created(){
        this.active=this.$store.getters.getFootActive
        // 从localStrage取
    },
    computed: {
        active1(){
            return this.$store.getters.getFootActive;
        }
    },
    watch: {
        active1(value){
          this.active=value
        }
    },
    methods:{
        onchange(){
           this.$store.commit('setFootActive', this.active)
        }
    }
}
</script>

<style>

</style>